<template>
  <div
    class="min-h-screen bg-gradient-to-br from-base-200 to-base-300 flex items-center justify-center px-4 relative overflow-hidden"
  >
    <!-- 背景装饰 -->
    <div class="absolute inset-0 overflow-hidden">
      <div
        class="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-to-br from-primary/20 to-transparent rounded-full animate-pulse"
      ></div>
      <div
        class="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-to-tl from-secondary/20 to-transparent rounded-full animate-pulse delay-1000"
      ></div>
    </div>

    <div class="max-w-md w-full relative">
      <!-- Logo和标题 -->
      <div class="text-center mb-8">
        <div class="w-24 h-24 mx-auto mb-4 relative">
          <div class="absolute inset-0 bg-primary/20 rounded-full animate-ping"></div>
          <img src="@/assets/logo.svg" alt="Logo" class="w-full h-full relative z-10" />
        </div>
        <h1
          class="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
        >
          地府管理系统
        </h1>
        <p class="mt-2 text-base-content/60">请登录以继续访问系统</p>
      </div>

      <!-- 登录卡片 -->
      <div class="card bg-base-100 shadow-2xl backdrop-blur-lg bg-opacity-60">
        <div class="card-body">
          <form @submit.prevent="handleSubmit" class="space-y-4">
            <!-- 用户名输入 -->
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">用户名</span>
              </label>
              <div class="relative group">
                <span
                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/50 group-focus-within:text-primary transition-colors"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </span>
                <input
                  type="text"
                  v-model="formData.username"
                  placeholder="请输入用户名"
                  class="input input-bordered w-full pl-10 focus:input-primary transition-all"
                  :class="{ 'input-error': errors.username }"
                  @input="validateField('username')"
                />
                <div class="min-h-6">
                  <span v-if="errors.username" class="text-sm text-error">{{ errors.username }}</span>
                </div>
              </div>
            </div>

            <!-- 密码输入 -->
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">密码</span>
              </label>
              <div class="relative group">
                <span
                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/50 group-focus-within:text-primary transition-colors"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </span>
                <input
                  type="password"
                  v-model="formData.password"
                  placeholder="请输入密码"
                  class="input input-bordered w-full pl-10 focus:input-primary transition-all"
                  :class="{ 'input-error': errors.password }"
                  @input="validateField('password')"
                />
                <div class="min-h-6">
                  <span v-if="errors.password" class="text-sm text-error">{{ errors.password }}</span>
                </div>
              </div>
            </div>

            <!-- 记住我和忘记密码 -->
            <div class="flex items-center justify-between">
              <label class="label cursor-pointer gap-2">
                <input type="checkbox" class="checkbox checkbox-sm checkbox-primary" v-model="formData.remember" />
                <span class="label-text">记住我</span>
              </label>
              <a href="#" class="link link-primary text-sm hover:link-hover">忘记密码？</a>
            </div>

            <!-- 登录按钮 -->
            <button
              type="submit"
              class="btn btn-primary w-full"
              :class="{ loading: isLoading }"
              :disabled="isLoading || !isFormValid"
            >
              {{ isLoading ? '登录中...' : '登录' }}
            </button>

            <!-- 注册链接 -->
            <div class="text-center mt-4">
              <span class="text-base-content/60">还没有账号？</span>
              <router-link to="/register" class="link link-primary ml-1">立即注册</router-link>
            </div>
          </form>
        </div>
      </div>

      <!-- 底部文字 -->
      <p class="text-center mt-4 text-base-content/60">
        版权所有 © {{ new Date().getFullYear() }} 地府管理系统
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()
const isLoading = ref(false)

const formData = reactive({
  username: '',
  password: '',
  remember: false,
})

const errors = reactive({
  username: '',
  password: '',
})

const validationRules = {
  username: [
    { required: true, message: '请输入用户名' },
    { min: 3, message: '用户名至少3个字符' },
    { max: 20, message: '用户名最多20个字符' },
  ],
  password: [
    { required: true, message: '请输入密码' },
    { min: 6, message: '密码至少6个字符' },
    { max: 20, message: '密码最多20个字符' },
  ],
}

const validateField = (field: keyof typeof formData) => {
  const rules = validationRules[field]
  let isValid = true
  errors[field] = ''

  for (const rule of rules) {
    const value = formData[field]
    if (rule.required && !value) {
      errors[field] = rule.message
      isValid = false
      break
    }
    if (rule.min && value.length < rule.min) {
      errors[field] = rule.message
      isValid = false
      break
    }
    if (rule.max && value.length > rule.max) {
      errors[field] = rule.message
      isValid = false
      break
    }
  }

  return isValid
}

const validateForm = () => {
  let isValid = true
  for (const field in formData) {
    if (field === 'remember') continue
    if (!validateField(field as keyof typeof formData)) {
      isValid = false
    }
  }
  return isValid
}

const isFormValid = computed(() => {
  return formData.username.length >= 3 && formData.password.length >= 6
})

const handleSubmit = async () => {
  if (!validateForm()) {
    return
  }

  isLoading.value = true
  try {
    const success = await userStore.login(formData.username, formData.password)
    if (success) {
      router.push('/')
    } else {
      // TODO: 显示错误消息
    }
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
@keyframes pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.2;
  }
}

.animate-pulse {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.delay-1000 {
  animation-delay: 1s;
}

.input-group {
  min-height: theme('spacing.20');
}
</style>
